<template>
  <div>
    <div v-if="personNo=='' ">未选择员工</div>
    <div v-if="personNo!==''">
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="font-size: 12px"
    >
      <el-form-item label="个人基本资料" label-width="100px">
        <span class="mytitle">基本资料</span>
      </el-form-item>
      <el-form-item>
        <div class="myjuzhong">
          <div>
            <label for="" class="myla">科室：</label>
            <el-select v-model="form.sectionNo" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.sectionNo"
                :label="item.sectionName"
                :value="item.sectionNo"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <label for="" class="myla">职工编号：</label>
            <el-input v-model="form.personNo" disabled></el-input>
          </div>
          <div>
            <label for="" class="myla">拼音码：</label>
            <el-input v-model="form.spellNo"></el-input>
          </div>
        </div>
      </el-form-item>
      <div class="myTable">
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">姓名：</label>
              <el-input v-model="form.personName"></el-input>
            </div>
            <div>
              <label for="" class="myla">曾用名：</label>
              <el-input v-model="form.anotherNo"></el-input>
            </div>
            <div>
              <label for="" class="myla">性别：</label>
              <el-radio-group v-model="form.personSex" class="mySex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </div>
            <!-- -->
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">出生日期：</label>
              <!--  <el-input v-model="form.birthDate"></el-input> -->
              <el-date-picker
                class="timeput"
                v-model="form.birthDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
            <div>
              <label for="" class="myla">身份证号：</label>
              <el-input v-model="form.capacityNo"></el-input>
            </div>
            <div>
              <label for="" class="myla">婚否：</label>
              <el-radio-group v-model="form.marry" class="mySex">
                <el-radio :label="1">已婚</el-radio>
                <el-radio :label="0">未婚</el-radio>
              </el-radio-group>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">籍贯：</label>
              <el-input v-model="form.nativePlace"></el-input>
            </div>
            <div>
              <label for="" class="myla">名族：</label>
              <el-input v-model="form.nation"></el-input>
            </div>
            <div>
              <label for="" class="myla">出身地：</label>
              <el-input v-model="form.birthPlace"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">毕业时间：</label>
              <!-- <el-input v-model="form.finishDate"></el-input> -->
              <el-date-picker
                class="timeput"
                v-model="form.finishDate"
                type="month"
                placeholder="选择月"
              >
              </el-date-picker>
            </div>
            <div>
              <label for="" class="myla">毕业院校：</label>
              <el-input v-model="form.finishSchool"></el-input>
            </div>
            <div>
              <label for="" class="myla">现家庭住址：</label>
              <el-input v-model="form.familyAddress"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">学位：</label>
              <el-input v-model="form.degree  "></el-input>
            </div>
            <div>
              <label for="" class="myla">获学位时间：</label>
           <!--    <el-input v-model="form.degreeDate"></el-input> -->
               <el-date-picker
                class="timeput"
                v-model="form.degreeDate"
                type="month"
                placeholder="选择月"
              >
              </el-date-picker>
            </div>
            <div>
                 <label for="" class="myla">最高学历：</label>
            <el-select v-model="form.highSchooling" placeholder="请选择">
              <el-option
                v-for="item in xueli"
                :key="item.highSchooling"
                :label="item.highName"
                :value="item.highSchooling"
              >
              </el-option>
            </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">授予单位：</label>
              <el-input v-model="form.schoolName"></el-input>
            </div>
            <div>
              <label for="" class="myla">现任行政职务：</label>
              <el-select v-model="form.postNo" placeholder="请选择">
              <el-option
                v-for="item in zhiwu"
                :key="item.postNo"
                :label="item.postName"
                :value="item.postNo"
              >
              </el-option>
                </el-select>
            </div>
            <div>
              <label for="" class="myla">专业技术职称：</label>
              <el-select v-model="form.titleNo" placeholder="请选择">
              <el-option
                v-for="item in zhicheng"
                :key="item.titleNo"
                :label="item.titleName"
                :value="item.titleNo"
              >
              </el-option>
                </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">聘任现职时间：</label>
             <!--  <el-input v-model="form.postDate"></el-input> -->
             <el-date-picker
                class="timeput"
                v-model="form.postDate"
                type="month"
                placeholder="选择月"
              >
              </el-date-picker>
            </div>
            <div>
              <label for="" class="myla">职务工资：</label>
              <el-input v-model="form.postWage"></el-input>
            </div>
            <div>
              <label for="" class="myla">健康情况：</label>
              <el-input v-model="form.health"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">参加何种党派：</label>
              <el-input v-model="form.inParty"></el-input>
            </div>
            <div>
              <label for="" class="myla">参加党派时间：</label>
              <!-- <el-input v-model="form.partyDate"></el-input> -->
              <el-date-picker
                class="timeput"
                v-model="form.partyDate"
                type="month"
                placeholder="选择月"
              >
              </el-date-picker>
            </div>
            <div>
              <label for="" class="myla">参加工作时间：</label>
             <!--  <el-input v-model="form.inWorkDate"></el-input> -->
              <el-date-picker
                class="timeput"
                v-model="form.inWorkDate"
                type="month"
                placeholder="选择月"
              >
              </el-date-picker>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="myjuzhong">
            <div>
              <label for="" class="myla">来校工作时间：</label>
              <!-- <el-input v-model="form.inZsuDate"></el-input> -->
                <el-date-picker
                class="timeput"
                v-model="form.inZsuDate"
                type="month"
                placeholder="选择月"
              >
              </el-date-picker>
            </div>
            <div>
              <label for="" class="myla">从事专业时间：</label>
          <!--     <el-input v-model="form.specialityDate"></el-input> -->
               <el-date-picker
                class="timeput"
                v-model="form.specialityDate"
                type="month"
                placeholder="选择月"
              >
              </el-date-picker>
            </div>
            <div>
              <label for="" class="myla">备注：</label>
              <el-input v-model="form.remarks"></el-input>
            </div>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <button @click="xiugai" class="btn">确认修改</button>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  created() {
    console.log(this.$store.state)
    if(this.$store.state.caozuoid){
    this.personNo = this.$store.state.caozuoid;
        this.getkeshi();
    this.getpop();
    this.getxueli()
    this.getzhiwu()
    this.getzhicheng()
    }else{
      this.personNo=''
    }
  },
  data() {
    return {
 /*      rules:{
       channelName:[
         {required:true,message:'渠道名称不能为空',trigger:'change'},
       ],
}, */

      zhicheng:[],
      zhiwu:[],
      xueli:[],
      personNo: "",
      form: {},
      selectoption: "",
      options: [],
    };
  },
  methods: {
    ...mapActions(["tongyong"]),
    onSubmit() {
      console.log("submit!");
    },
   /*  inputChange() {
      this.form.capacityNo = this.form.capacityNo.replace(/[^\d]/g, '')     // 或者写成 /[^0-9]/g
    }, */
    /* 获取所有科室名称 */
    getkeshi() {
      this.tongyong({
        name: "SELECT_keshi",
        data: {},
      }).then((resp) => {
        this.options = resp.data.data;
      });
    },
    getxueli(){
     this.tongyong({
       name:'SELECT_allxueli',
  
     }).then((resp)=>{
       this.xueli=resp.data.data
     })
    },
    getzhicheng(){
     this.tongyong({
       name:'SELECT_allzhicheng',
  
     }).then((resp)=>{
       this.zhicheng=resp.data.data
     })
    },
    getzhiwu(){
     this.tongyong({
       name:'SELECT_allzhiwu',
  
     }).then((resp)=>{
       this.zhiwu=resp.data.data
     })
    },

    /* 获取个人基本资料 */
    getpop() {
      this.tongyong({
        name: "SELECT_gerenxiangqin",
        data: {
          personNo: this.personNo,
        },
      }).then((resp) => {
        console.log(resp.data);
        this.form = resp.data.data;
         if(this.form.finishDate){
        this.form.finishDate= this.form.finishDate.slice(0,4)+'-'+ this.form.finishDate.slice(4,6)
         }
        if(this.form.degreeDate){
      this.form.degreeDate= this.form.degreeDate.slice(0,4)+'-'+ this.form.degreeDate.slice(4,6)
        }
        if(this.form.postDate){
        this.form.postDate= this.form.postDate.slice(0,4)+'-'+ this.form.postDate.slice(4,6)
        }
    if(this.form.partyDate) {
  this.form.partyDate= this.form.partyDate.slice(0,4)+'-'+ this.form.partyDate.slice(4,6)
    }   
    if(this.form.inWorkDate){
        this.form.inWorkDate= this.form.inWorkDate.slice(0,4)+'-'+ this.form.inWorkDate.slice(4,6)
    }
   if(this.form.inZsuDate){
    this.form.inZsuDate= this.form.inZsuDate.slice(0,4)+'-'+ this.form.inZsuDate.slice(4,6)
   }
    if(this.form.specialityDate){
  this.form.specialityDate= this.form.specialityDate.slice(0,4)+'-'+ this.form.specialityDate.slice(4,6)
    }
    
      });
    },
    /* 修改日期时间格式 */
    getData(value) {
      let date = new Date(value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let d = date.getDate();
      return `${year}-${month}-${d}`;
    },
    /* 修改月份时间格式 */
    getmonthData(value) {
      let date = new Date(value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      if(month<10){
        month=`${0}${month}`
      }
      return `${year}${month}`;
    },
    /* 修改 */
    xiugai(){
      this.form.birthDate=this.getData(this.form.birthDate)
      this.form.degreeDate=this.getmonthData(this.form.degreeDate)
      this.form.finishDate=this.getmonthData(this.form.finishDate)
      this.form.inWorkDate=this.getmonthData(this.form.inWorkDate)
      this.form.inZsuDate=this.getmonthData(this.form.inZsuDate)
      this.form.partyDate=this.getmonthData(this.form.partyDate)
      this.form.postDate=this.getmonthData(this.form.postDate)
      this.form.specialityDate=this.getmonthData(this.form.specialityDate)
      console.log(this.form)
  this.tongyong({
       name:'updata_bsaic',
       data:this.form
     }).then((resp)=>{
       console.log(resp.data)
     })

    }
  },
};
</script>
<style lang="less" scoped>

* {
  padding: 0;
  margin: 0;
}
.myla {
  display: inline-block;
  width: 98px;
  text-align: right;
}
.myjuzhong {
  display: flex;
  justify-content: space-between;
}
.el-radio {
  margin-right: 10px;
}
.mytitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
}
/deep/.el-input {
  width: 200px;
  .el-input__inner {
    height: 25px;
  }
}
/deep/.el-form-item__content {
  width: 100%;
  margin-left: 0 !important;
}
.el-form-item {
  margin-bottom: 0;
}
.myTable {
  padding: 10px 60px;
  border: 1px solid rgba(129, 129, 129, 0.4);
}
.mySex {
  width: 200px;
}
.timeput {
  width: 200px !important;
}
.btn{
  margin-top:20px ;
  padding: 12px;
  font-size: 15px;
}
</style>
